import React from 'react';
import styles from './index.less';
import { Input, Rate } from 'antd';
// components
import { TRMessage } from '@/components';
import TRNotification from '@/utils/notification';
import { iconQuestion, iconSatisfied, iconSystem } from '@/assets/feed/index';
import { updateFeed } from '@/services/analytics';

const ICON_OBJ = {
  SYS: {
    hasContent: true,
    icon: iconSystem,
    placeholder: '',
    titleAlign: 'center',
    contentAlign: 'left',
  },
  SAT: {
    hasContent: true,
    icon: iconSatisfied,
    placeholder: '请写下您的意见',
  },
  QUE: {
    hasContent: false,
    icon: iconQuestion,
    placeholder: '请写下您遇到的问题',
    titleAlign: 'center',
  },
};
const FEED_KEY = 'feedKey';

const FeedModal = ({ onClose, id, type = 'SYS', content = '' }) => {
  const [rateNumber, setRateNumber] = React.useState(0);
  const [pinStr, setPinStr] = React.useState('');
  const [isPin, setIsPin] = React.useState(false);
  let itemObj = ICON_OBJ[type] || ICON_OBJ.SYS;
  const titleStr = type === 'SYS' ? '系统通知' : content;
  const contentStr = type === 'SAT' ? '请结合您真实的使用体验打分，我们将努力做的更好！' : content;
  const onRateChange = (num) => {
    setRateNumber(num);
  };
  React.useEffect(() => {
    onFeedRead();
  }, []);
  const onFeedRead = () => {
    try {
      let arr = localStorage.getItem(FEED_KEY);
      arr = !arr ? [] : JSON.parse(arr);
      arr.push(id || 0);
      localStorage.setItem(FEED_KEY, JSON.stringify(arr));
      updateFeed({ platformFeedbackId: id, checksum: '1' });
    } catch (e) {}
  };
  const onReqeust = async (ctype) => {
    if (ctype === 'submit' && pinStr.length === 0) {
      return TRMessage.warning(itemObj.placeholder);
    }
    let params = {};
    if (ctype === 'close') {
      params.stop = true;
    }
    if (ctype === 'done') {
      params.result = '是';
    }
    if (ctype === 'done1') {
      params.result = String(rateNumber);
    }
    if (ctype === 'no') {
      params.result = '否';
    }
    if (ctype === 'submit') {
      params.comment = pinStr;
      params.result = '是';
    }
    if (ctype === 'submit' && type === 'SAT') {
      params.result = String(rateNumber);
    }
    params.checksum = '1';
    updateFeed({ ...params, platformFeedbackId: id });
    onClose && onClose();
  };
  if (isPin) {
    return (
      <div className={styles.container}>
        <div className={styles.container_content}>
          <div className={styles.container_close} />
          <div className={styles.container_content_textarea}>
            <Input.TextArea
              bordered={false}
              className={styles.container_content_textarea_input}
              onChange={(e) => {
                setPinStr(e.target.value);
              }}
              value={pinStr}
              placeholder={itemObj.placeholder}
              rows={10}
            />
          </div>
          <div
            className={styles.container_content_sta_button}
            style={{ borderTop: 'none' }}
            onClick={() => {
              onReqeust('submit');
            }}
          >
            提交
          </div>
        </div>
      </div>
    );
  }
  return (
    <div className={styles.container}>
      <div className={styles.container_content}>
        <div className={styles.container_close} />
        <div className={styles.container_content_bg}>
          <img className={styles.container_content_bg_icon} src={itemObj.icon} />
        </div>
        <div
          className={styles.container_content_title}
          style={{ textAlign: ICON_OBJ[type].titleAlign || 'left' }}
        >
          {titleStr}
        </div>
        {itemObj.hasContent ? (
          <div
            className={styles.container_content_text}
            style={{ textAlign: ICON_OBJ[type].contentAlign || 'center' }}
          >
            {contentStr}
          </div>
        ) : null}
        {type === 'SAT' ? (
          <div className={styles.container_content_rate}>
            <Rate
              onChange={onRateChange}
              style={{ fontSize: '30px' }}
              allowHalf
              value={rateNumber}
            />
          </div>
        ) : null}
        <div style={{ height: '20px' }} />
        {type === 'SAT' ? (
          <div
            className={styles.container_content_sta_button}
            onClick={() => {
              if (rateNumber === 0) return TRMessage.error('请评价');
              setIsPin(true);
            }}
          >
            撰写评论
          </div>
        ) : null}
        {['SAT', 'SYS'].includes(type) ? (
          <div
            className={styles.container_content_sta_button}
            onClick={() => {
              if (type === 'SAT' && rateNumber === 0) return TRMessage.error('请评价');
              onReqeust(type === 'SAT' ? 'done1' : 'done');
            }}
          >
            {type === 'SAT' ? '好' : '已知晓'}
          </div>
        ) : null}
        {type === 'QUE' ? (
          <div className={styles.container_content_que_button}>
            <div
              className={styles.container_content_que_button_btn}
              onClick={() => {
                setIsPin(true);
              }}
            >
              是
            </div>
            <div className={styles.container_content_que_button_line} />
            <div
              className={styles.container_content_que_button_btn}
              onClick={() => {
                onReqeust('no');
              }}
            >
              否
            </div>
          </div>
        ) : null}
      </div>
    </div>
  );
};

class FeedAlert {
  __key__ = '';
  show = (param) => {
    if (this.__key__.length === 0) {
      this.__key__ = String(Date.now());
      TRNotification.add({
        key: this.__key__,
        content: (
          <FeedModal
            {...param}
            onClose={() => {
              this.dismiss();
            }}
          />
        ),
        dismiss: this.dismiss,
      });
    }
  };
  dismiss = () => {
    if (this.__key__.length > 0) {
      TRNotification.remove(this.__key__);
      this.__key__ = '';
    }
  };
}
const feed = new FeedAlert();
export default feed;
